<template>
  <div
    class="box"
    :style="{
      height: height,
    }"
  >
    <div class="no-result" v-if="!userList.length">
      <div class="text">没有结果</div>
    </div>
    <ul v-if="userList.length">
      <li v-for="data in userList" :key="data" class="feed-item">
        <Search-Item :data="data"></Search-Item>
      </li>
    </ul>
  </div>
</template>
<script>
import SearchItem from "../../components/search/searchitem.vue";
import { nextTick, onMounted, ref } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import http from "../../util/http";
import BetterScroll from "better-scroll";
import { useStore } from "vuex";
export default {
  props: ["mynum"],
  components: {
    SearchItem,
  },
  setup(props) {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const userList = ref("");
    const height = ref("0px");

    onMounted(() => {
      // console.log(store.state.userheadheight);
      height.value =
        document.documentElement.clientHeight -
        store.state.userheadheight +
        "px";
      http({
        url: `/api/v1/feed/${route.params.myid}?pageIndex=1&pageSize=10&type=${props.mynum}`,
      }).then((res) => {
        console.log(res.data);
        userList.value = res.data.data;
        console.log(userList);

        nextTick(() => {
          new BetterScroll(".box", {
            scrollbar: {
              fade: true,
            },
          });
        });
      });
    });

    return {
      userList,
      height,
    };
  },

  mounted() {
    this.$store.commit("hidden");
  },
  unmounted() {
    this.$store.commit("show");
  },
};
</script>

<style lang="scss" scoped>
.box {
  // height: 26.9375rem;
  overflow: hidden;
  position: relative;
}
.no-result {
  display: block;
  position: static;
  background-color: transparent;
  width: 100%;
  bottom: 0;
  margin: 0 auto;
  margin-top: 40px;
  padding-top: 0;
  padding-bottom: 40px;
  z-index: 9;
  .text {
    margin-top: 18px;
    color: #999;
    text-align: center;
  }
}

ul {
  background-color: #eee;
}
.feed-item {
  margin-bottom: 10px;
  padding: 15px 15px 10px 15px;
  background-color: #fff;
}
</style>